<div class="modal-dialog" role="document" style="width:800px;">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">设置经纬度 <small class="text-danger">请将楼宇所在位置拖动至红色中心点</small></h4>
        </div>
        <div id="allmap" style="height: 500px; width: 780px; margin: 10px;"></div>
        <div class="modal-footer">
            <button type="button" id="cancelMap" class="btn btn-default">取消</button>
            <button type="button" id="saveMap" class="btn btn-primary">保存</button>
        </div>
    </div>
</div>

<script type="text/javascript">
    var map;
    var longitude = {$longitude};
    var latitude = {$latitude};

    $(function () {
        setTimeout(initMap,300);
        $("#cancelMap").bind("click", cleanMap);
        $("#saveMap").bind("click", doSaveMap);
    });

    function initMap() {
        map = new BMap.Map("allmap");
        //设置地图中心点
        var point = new BMap.Point(longitude, latitude);
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom(true);
        map.setCurrentCity("南京");
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        map.addEventListener('ondragging', function(){
        	marker.setPosition(map.getCenter());
    	});
        map.addEventListener("dragend", handleDrag);
    }
    
    function handleDrag(){
    	var center = map.getCenter();
    	longitude = center.lng;
    	latitude = center.lat;
    }

    function doSaveMap() {
        $("#longitude").val(longitude);
        $("#latitude").val(latitude);
        $("#modal_map").html("");
        $("#modal_map").modal('hide');
    }

    function cleanMap() {
        map = null;
        $("#modal_map").html("");
        $("#modal_map").modal('hide');
    }
</script>